<template>
    <van-nav-bar
        :title="info.name"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onBack"
    />

    <div class="h50"></div>
    <div class="clear"></div>
    <div class="aui-m-slider">
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="(image,index) in info.thumbs_cdn" :key="index">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>

    </div>
    <div class="clear"></div>
    <div class="detailbox">
        <h4>{{ info.name }}</h4>
        <div class="price">
            <em>￥</em>{{ info.price }}<span style="float: right;">库存：{{ info.stock }}件</span>
        </div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>
    <div class="clear"></div>
    <div class="detailbox_2" v-html="info.content"></div>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon :icon="info.collection_status === true ? 'star' : 'star-o'" :text="info.collection_status === true ? '已收藏' : '收藏'" :color="info.collection_status === true ? '#ff5000' : ''" @click="onCollection" />
        <van-action-bar-button type="warning" text="加入购物车" @click="onCartAdd" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
// 引入Vue的响应式API代理
const { proxy } = getCurrentInstance();
const info = ref({});
const id = ref(proxy.$route.query.id ?? 0); 
// 获取cookies中的business对象，如果没有则默认为一个空对象
const business = reactive(proxy.$cookies.get('business') ?? {}); 
onMounted(() => { 
    getProductInfo(); // 获取产品信息
});
// 添加到购物车的操作
const onCartAdd = async () => {
    if(!business || JSON.stringify(business) === '{}')
    {
        proxy.$showNotify({
            type:'warning',
            message:'请先登录',
            duration:2000,
            onClose:() => {
                proxy.$router.push('/business/base/login');
            }
        });

        return;
    }

    let data = {
        busid:business.id,
        proid:id.value,
    }

    let result = await proxy.$Api.cartAdd(data);

    if(result && result.code === 1)
    {
        proxy.$showConfirmDialog({
            title:result.msg,
            message:'是否需要跳转购物车进行结算？'
        }).then(() => {
            proxy.$router.push({path:'/product/cart/index',query:{action:'cart'}});
        }).catch(() => {
            
        });
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:2000
        });

        return;
    }
}
//收藏功能
const onCollection = async () => {
    if(!business || JSON.stringify(business) === '{}')
    {
        proxy.$showNotify({
            type:'warning',
            message:'请先登录',
            duration:2000,
            onClose:() => {
                proxy.$router.push('/business/base/login');
            }
        });

        return;
    }

    let result = await proxy.$Api.productCollection({id:id.value,busid:business.id});

    if(result && result.code === 1)
    {
        info.value.collection_status = !info.value.collection_status;
    }else{
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:200
        });

        return;
    }
}
//获取商品详细信息
const getProductInfo = async () => {
    let data = {
        id:id.value,
        busid:business.id
    }

    let result = await proxy.$Api.productInfo(data);

    if(result && result.code === 0)
    {
        proxy.$showNotify({
            type:'warning',
            message:result.msg,
            duration:2000,
            onClose:() => {
                proxy.$router.back();
            }
        });

        return;
    }

    info.value = result.data;
}

const onBack = () => {
    proxy.$router.back();
};
</script>
